<template>
  <Layout>
    <div class="large-screen-equipment">
      <!-- 选择设备 -->
      <div class="large-screen-equipment-select">
        <a-select
          style="width: 100%"
          v-model:value="equipmentId"
          :options="equipmentsList"
          :fieldNames="{ value: 'id', label: 'name' }"
          placeholder="请选择设备"
          show-search
          :filter-option="
            (input, option) => {
              return (
                option['name'].toUpperCase().indexOf(input.toUpperCase()) >= 0
              );
            }
          "
          @dropdownVisibleChange="handleDropdownToggle"
          @change="onChange"
        >
          <template #suffixIcon>
            <img
              :style="{
                transform: `${isOpen ? 'rotate(180deg)' : ''}`,
                transition: 'transform 0.3s ease',
              }"
              src="@/assets/images/large-screen/equipment/arrow.png"
              alt=""
            />
          </template>
        </a-select>
      </div>
      <div class="large-screen-equipment-content">
        <!-- top -->
        <Top />
        <a-row class="equipment-bottom">
          <a-col :span="8">
            <BottomLeft />
          </a-col>
          <a-col :span="8" style="padding: 0 12px">
            <BottomMiddle />
          </a-col>
          <a-col :span="8">
            <BottomRight />
          </a-col>
        </a-row>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
// import { getEquipmentsStatus } from "@/api/large-screen";
import Top from "./top.vue";
import BottomLeft from "./bottom-left.vue";
import BottomMiddle from "./bottom-middle.vue";
import BottomRight from "./bottom-right.vue";
import Layout from "../layout.vue";

const route = useRoute();
const router = useRouter();

const equipmentId = ref(route?.query?.id);
const equipmentsList = ref([]);
const getEquipmentsList = async () => {
  try {
    // const res = await getEquipmentsStatus({});
    // equipmentsList.value = res || [];
    equipmentsList.value = new Array(30).fill().map((_, index) => ({
      id: `${index + 1}`,
      name: `设备${index + 1}`,
      status: Math.random() > 0.5 ? "运行中" : "离线",
      workHours: Math.floor(Math.random() * 1000),
      productNumber: Math.floor(Math.random() * 1000),
      progress: Math.floor(Math.random() * 100),
      value: Math.floor(Math.random() * 100),
    }));
  } catch (error) {
    console.log(error);
  }
};
const onChange = (val) => {
  router.push({
    path: "/large-screen/equipment",
    query: {
      id: val,
    },
  });
};

const isOpen = ref(false); // 控制旋转状态
const handleDropdownToggle = (open) => {
  isOpen.value = open; // 更新展开状态
};

onMounted(() => {
  getEquipmentsList();
});
</script>

<style lang="scss" scoped>
$topHeight: 500px;
$bottomHeight: 410px;
:deep(.large-screen-equipment) {
  width: 100%;
  height: 100%;
  .equipment-title {
    padding: 15px 0;
    color: #fff;
    font-size: 24px;
    text-align: center;
    text-shadow: 0 0 5px #fff; /* 更亮的蓝色光晕 */
    // text-shadow: 0 0 5px #fff, 0 0 10px #00a8ff, /* 更大范围的蓝色光晕 */ 0 0 20px #00a8ff; /* 更亮的蓝色光晕 */
  }
  .large-screen-equipment-select {
    position: absolute;
    top: -46px;
    left: 4px;
    width: 250px;
    height: 40px !important;
    .ant-select {
      width: 100% !important;
      height: 100% !important;
      .ant-select-selector {
        height: 100% !important;
        background-color: transparent !important;
        border: 2px solid #295487 !important;
        .ant-select-selection-item,
        .ant-select-selection-placeholder,
        .ant-select-selection-search-input {
          color: #fff !important;
          font-size: 14px !important;
        }
        .ant-select-selection-search-input,
        .ant-select-selection-item {
          height: 35px !important;
          line-height: 35px !important;
        }
        .ant-select-selection-item {
          padding-inline-end: 18px !important;
        }
      }
      .ant-select-arrow {
        color: #fff !important;
        height: 12px !important;
        // inset-inline-end: 11px !important;
        margin-top: -6px !important;
        font-size: 12px !important;
        > img {
          width: 12px;
          height: 12px;
        }
      }
    }
  }
  .large-screen-equipment-content {
    width: 100%;
    float: left;
    color: #fff;
    .equipment-top {
      position: relative;
      height: $topHeight;
      background: url("@/assets/images/large-screen/equipment/top-bg.png")
        no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
    .equipment-bottom {
      position: relative;
      display: flex;
      margin-top: 20px;
      .equipment-bottom-left,
      .equipment-bottom-right {
        height: $bottomHeight;
        background: url("@/assets/images/large-screen/equipment/bottom-bg.png")
          no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
      .equipment-bottom-middle {
        height: $bottomHeight;
        background: url("@/assets/images/large-screen/equipment/middle-bg.png")
          no-repeat;
        background-position: center;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
